import React, { useEffect } from 'react'
import { View, Text, Image, StyleSheet, TouchableOpacity, Linking } from 'react-native'
import { useNavigation } from '@react-navigation/native'
interface IProps {
    children?: React.ReactNode
    title: string
    onCallback: (id: string) => void
}
const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'wrap',
        flex: 1,
        // justifyContent: 'center',
        // alignItems: 'center',
        // height: '100%',
    },
    item: {
        height: 150,
        width: '47%',
        backgroundColor: 'pink',
        borderRadius: 10,
        margin: 5,
        justifyContent: 'center',
        alignItems: 'center',
    }

})
const listItem = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
const HomeView = (props: IProps) => {
    const { children, title, onCallback } = props
    const navigator = useNavigation()
    useEffect(() => {
        const handleDeepLink = (url) => {
            // 处理链接，例如导航到特定页面
            const route = url.replace(/.*?:\/\//g, ''); // 获取路径
            if (route.startsWith('dbzyn1/Home')) {
                navigator.navigate('Home')
                // 这里可以根据需要导航到 App B 的页面
                // 例如，使用 React Navigation 导航到 DetailScreen
            }
        };

        const linkingListener = Linking.addEventListener('url', ({ url }) => handleDeepLink(url));

        return () => {
            linkingListener.remove();
        };
    }, []);
    return (
        <View style={styles.container}>
            {listItem.map((item, index) => {
                return <View key={index} style={styles.item}>
                    <TouchableOpacity onPress={() => {
                        navigator.navigate('HomeDetail')
                    }}>
                        <Text>{item}</Text>
                    </TouchableOpacity>
                </View>

            })
            }
        </View>
    )
}
export default HomeView